<template>
  <div class="person">
    <!-- 顶部个人信息 -->
    <div class="top flex">
      <div class="user flex">
        <image class="img" src="../../static/1.jpg" mode="widthFix"/>
        <div v-if="name" class="name">{{name}}</div>
        <div v-else class="name">普通用户</div>
      </div>
      <div class="qr">
        <div class="title">pro会员</div>
        <div class="title">立即开通</div>
      </div>
    </div>
    <!-- 我的资产 -->
    <div class="userZc">
      <div class="p">我的资产</div>
      <div class="yue">
        <div class="hongbao" v-for="item in 5" :key="item">
          <div class=".pp">￥0</div>
          <div>余额</div>
        </div>
      </div>
    </div>
    <!-- 功能分类 -->
    <div class="main">
      <div class="child" v-for="item in 15" :key="item">
        <div class="icon">
          <image class="img" src="@/static/QQ.png" mode="scaleToFill"/>
        </div>
        <div class="text">我的订单</div>
      </div>
    </div>
    <!-- 退出按钮 -->
    <button class="btn" @click="tc">退出登录</button>
  </div>
</template>

<script setup lang="ts">
//引入uni相关
import {onShow} from '@dcloudio/uni-app'
//引入vue相关
import {ref} from 'vue'

//定义响应式数据
//用户登录唯一标识
let token = ref<any>('')
//用户昵称
let name = ref<any>('')


//定义方法
//退出登录的回调
const tc = ()=>{
  //清除token
  uni.setStorageSync('TOKEN','')
  uni.navigateTo({
    url:`/pages/login/login`
  })
}


//生命周期钩子
onShow(()=>{
  token.value = uni.getStorageSync('TOKEN')
  if(token.value){//已登陆
    name.value = uni.getStorageSync('NAME')
  }else{//未登录
    uni.navigateTo({
      url:`/pages/login/login`
    })
  }
})

</script>

<style scoped lang="less">
.person{
  width: 100%;
  height: 100%;
  background-color: rgb(233, 233, 233);
  .top{
    background-image: url('https://yanxuan.nosdn.127.net/5905098f74e04c39fa5e76ebb9ff591b.png');
    width: 100%;
    height: 260rpx;
    padding: 40rpx;
    box-sizing: border-box;
    justify-content: space-between;
    .user{
      align-items: center;
      .img{
        width: 140rpx;
        border-radius: 50%;
      }
      .name{
        color: white;
        margin-left: 30rpx;
      }
    }
    .qr{
      position: fixed;
      top: 100rpx;
      right: 0;
      padding: 10rpx;
      border-radius: 200rpx 0 0 200rpx;
      width: 170rpx;
      background-color: rgb(46, 46, 46);
      color: gold;
      font-size: 28rpx;
      .title{
        margin-left: 40rpx;
      }
    }
  }
  //我的资产
  .userZc{
    width: 100%;
    background: white;
    margin-bottom: 15rpx;
    .p{
      width: 90%;
      height: 90rpx;
      border-bottom: 2px solid #eee;
      margin: 0 auto;
      line-height: 100rpx;
    }
    .yue{
      width: 100%;
      height: 160rpx;
      display: flex;
      // justify-content: space-around;
      text-align: center;
      align-items: center;
      .hongbao{
        width: 20%;
        font-size: 25rpx;
        .pp{
          font-weight: bold;
        }
      }
    }
  }
  // 主体
  .main{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 40rpx;
    // box-sizing: border-box;
    .child{
      width: 33%;
      height: 200rpx;
      background: white;
      border: 1px solid #eee;
       box-sizing: border-box;
       text-align: center;
       .icon{
        width: 100rpx;
        height: 100rpx;
        margin: 20rpx auto 0;
        .img{
          width: 70%;
          height: 70%;
         
        }
       }
       .text{
            font-size: 20rpx;
        }
    }
  }
  .btn{
    margin-top: 40rpx;
    font-size: 28rpx;
    height: 100rpx;
    line-height: 100rpx;
  }
}
</style>